<%
local api = require "luci.passwall2.api"
-%>
<script type="text/javascript">
	//<![CDATA[
	var log_textarea = null;
	var first_load_done = false;

	function scrollToBottom() {
		log_textarea.scrollTop = log_textarea.scrollHeight;
	}

	function clear_log(btn) {
		XHR.get('<%=api.url("server_clear_log")%>', null,
			function(x, data) {
				if(x && x.status == 200 && log_textarea) {
					log_textarea.innerHTML = "";
					scrollToBottom();
				}
			}
		);
	}
	XHR.poll(3, '<%=api.url("server_get_log")%>', null,
		function(x, data) {
			if(x && x.status == 200) {
				if (!log_textarea) log_textarea = document.getElementById('log_textarea');
				var wasBottom = (log_textarea.scrollTop + log_textarea.clientHeight >= log_textarea.scrollHeight - 10);
				log_textarea.innerHTML = x.responseText;
				if (!first_load_done) {
					scrollToBottom();
					first_load_done = true;
				}
				else if (wasBottom) {
					scrollToBottom();
				}
			}
		}
	);
	//]]>
</script>
<fieldset class="cbi-section" id="_log_fieldset">
	<legend>
		<%:Logs%>
	</legend>
	<input class="btn cbi-button cbi-button-remove" type="button" onclick="clear_log()" value="<%:Clear logs%>" />
	<textarea id="log_textarea" class="cbi-input-textarea" style="width: 100%;margin-top: 10px;" data-update="change" rows="20" wrap="off" readonly="readonly"></textarea>
</fieldset>